<template>
  <div>
    <el-button type="danger">搜索</el-button>
    <el-button type="danger">添加</el-button>
    <el-button type="danger">删除</el-button>
    <el-button type="danger">启用</el-button>
    <el-button type="danger">禁用</el-button>
  </div>
  <el-table ref="multipleTableRef" :data="tableData" row-key="id" style="width: 100%">
    <el-table-column type="selection" width="55" />

    <el-table-column property="id" label="编码"/>
    <el-table-column property="username" label="登录名"  />
    <el-table-column property="nickname" label="昵称"  />
    <el-table-column property="phone" label="电话"  />
    <el-table-column property="email" label="邮箱" />
    <el-table-column property="count" label="登录次数"  />
    <el-table-column property="date" label="最后编辑时间" />

    <el-table-column label="状态" >
      <template #default="scope">
        <el-switch
    v-model="value2"
    class="ml-2"
    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
  />
      </template>
    </el-table-column>
    <el-table-column label="操作" width="240">
      <template #default="scope">
        <el-button>编辑</el-button>
        <el-button>授权</el-button>
        <el-button>删除</el-button>
      </template>
    </el-table-column>

  </el-table>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import type { TableInstance } from 'element-plus'
const value2 = ref(true)
interface User {
  id: number
  date: string
  name: string
  address: string
}

const multipleTableRef = ref<TableInstance>()
const multipleSelection = ref<User[]>([])


const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}

const tableData = [
  {
    id: 1,
    username: 'admin',
    nickname: '超级管理员',
    phone: '13811301972',
    email: '13811301972@163.com',
    count: 998,
    date: '2018-04-18'
  },
  {
    id: 170,
    username: 'test',
    nickname: '内饰店铺',
    phone: '15710062825',
    email: '15710062825@163.com',
    count: 72,
    date: ''
  },
  {
    id: 173,
    username: 'test1234',
    nickname: 'test1234',
    phone: '13800138000',
    email: 'hello@123.com',
    count: 5,
    date: '2019-05-23'
  },
  {
    id: 177,
    username: 'liangdianpu',
    nickname: '亮店铺',
    phone: '13718766889',
    email: '23341058@qq.com',
    count: 0,
    date: '2023-12-12'
  },
  {
    id: 178,
    username: '123123',
    nickname: '123123',
    phone: '13718766889',
    email: '23341058@qq.com',
    count: 0,
    date: '2024-11-04'
  },
  {
    id: 179,
    username: 'adsads123',
    nickname: '防守打方式',
    phone: '13718766889',
    email: '23341058@qq.com',
    count: 0,
    date: '2024-11-04'
  },
  {
    id: 180,
    username: 'yunyingyuan',
    nickname: '运营小张',
    phone: '13718766889',
    email: '23341058@qq.com',
    count: 2,
    date: '2025-05-06'
  },
]
</script>


<style lang='less' scoped></style>